<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>账号设置-修改密码</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/userInfo.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a>项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe647;</span>
						<span>账号资料</span>
					</a>
				</li>
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe614;</span>
						<span>修改密码</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<div class="contentTitle">账号资料</div>
				<div class="clear"></div>
			</div>
			<div class="userInfoPersonal">
				<div class="projectBox">
					<div class="personalForm">
						<div class="newProjectForm">
							<div class="inputBox">
								<label>登录账号</label>
								<div class="longInput">
									<input type="password" placeholder="请输入当前密码"/>
								</div>
								<div class="tips"></div>
								<div class="clear"></div>
							</div>
							<div class="inputBox">
								<label>姓名</label>
								<div class="longInput">
									<input type="password" placeholder="请输入6-16位密码" minlength="6" maxlength="16"/>
								</div>
								<div class="tips"></div>
								<div class="clear"></div>
							</div>
							<div class="inputBox">
								<label>公司名称</label>
								<div class="longInput">
									<input type="password" placeholder="请重复输入密码"/>
								</div>
								<div class="tips"></div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
					<div class="btnBox">
						<button class="greenLargerBtn save">保存</button>
					</div>
				</div>				
			</div>
		</div>	
		<!--内容 end-->
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			
			//表单验证
			$(document).on('click','.save',function(){
				if($('.inputBox input').eq(1).val().length < 6 || $('.inputBox input').eq(1).val().length > 16){
					$('.inputBox .tips').eq(1).html('请输入6-16位密码');
				}else{
					$('.inputBox .tips').eq(1).html('');
				}
				if($('.inputBox input').eq(1).val() != $('.inputBox input').eq(2).val()){
					$('.inputBox .tips').eq(2).html('请输入密码一致');
				}else{
					$('.inputBox .tips').eq(2).html('');
				}
			});
		});
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
	</script>
</html>
